<template>
  <div v-if="isShow" ref="rightMenu" class="g-right-click-menu" :style="style">
    <div v-for="(item, index) in data" :key="index" class="operating" @click.stop="operatingRightAction($event, item)">{{ item.label }}</div>
  </div>
</template>
<script>
export default {
  name: 'RightClickMenu',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    left: {
      type: Number,
      default: 0
    },
    type: {
      type: Number,
      default: 1
    },
    dataInfo: {
      type: Object,
      default: () => {}
    },
    top: {
      type: Number,
      default: 0
    },
    isViewInfo: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  computed: {
    style() {
      const clientHeight = document.body.clientHeight
      const y = this.top
      if (clientHeight - y < 100) {
        return `left:${this.left}px;bottom:${clientHeight - y}px`
      } else {
        return `left:${this.left}px;top:${this.top}px`
      }
    }
  },
  watch: {
    left: {
      immediate: true,
      handler(newVal) {
        if (newVal !== 0) {
          this.isShow = true
        }
      }
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      // immediate: true
    }
  },
  mounted() {
    const _self = this
    window.addEventListener('click', function() {
      _self.isShow = false
    })
    window.addEventListener('mousedown', function(e) {
      if (e.which === 3) {
        _self.isShow = false
      }
    })
  },
  methods: {
    /**
		 * @func 点击操作
		 * @param val 1、置顶/取消置顶 2、开启/关闭免打扰 3、开启/关闭星标 4、删除会话
		 */
    operatingRightAction($event, val) {
      this.$emit('ok', $event, val)
      this.isShow = false
    }
  }
}
</script>
<style lang="scss" scoped>
.g-right-click-menu {
	left: 0;
	background: white;
	width: 148px;
	height: auto;
	position: fixed;
	//border: 1px solid #c4c4c4;
	z-index: 9;
	box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
	// box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
	.operating {
		font-size: 12px;
		padding-left: 23px;
		cursor: pointer;
		line-height: 27px;
	}
	.operating:hover {
		background: #e2e2e2;
	}

	.last-delete {
		border-top: 1px solid #ededed;
	}
}
</style>
